<#include "/common/_layout.html"/>
<@layout>
	<style>
		.title {
			margin: 0;
			padding: 20px 0;
		}
		
		#app {
			padding: 0 20px;
		}
	</style>
	<div id="app">
		<h3 class="title">{{moduleName}}</h3>
		<el-tabs type="card">
			<el-tab-pane label="库存预警">

				<el-form ref="form" :inline="true" :model="search" label-width="100px">
					<el-form-item label="商品品牌" prop="goods_brand">
						<el-select v-model="search.goods_brand" placeholder="请选择">
							<el-option v-for="item in brand" :key="item.id" :label="item.brand_name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品类型" prop="goods_type">
						<el-select v-model="search.goods_type" placeholder="请选择">
							<el-option v-for="item in type" :key="item.id" :label="item.type_name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品规格" prop="goods_spec">
						<el-input v-model.trim="search.goods_spec"></el-input>
					</el-form-item>
					<el-button type="primary" icon="plus" @click="handlePageSizeChange(1)">搜索</el-button>
				</el-form>

				<el-table ref="table" :data="tableData" border style="margin-top: 10px;" v-loading="loading" element-loading-text="拼命加载中">
					<el-table-column prop="brand_name" label="品牌" align='center' width="250">
					</el-table-column>
					<el-table-column prop="type_name" label="类型" align='center' width="150">
					</el-table-column>
					<el-table-column prop="goods_spec" label="型号" align='center'>
					</el-table-column>
					<el-table-column prop="goodsStores" label="库存情况" align='center' width="120">
						<template scope="scope">
							<div v-if="scope.row.goodsStores">
								<p v-for="(item, index) in scope.row.goodsStores">{{item.name}}：{{item.num}}</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="warning_value" label="库存预警" align='center' width="80">
					</el-table-column>
					<el-table-column prop="goods_price" label="单价" align='center' width="120">
					</el-table-column>
					<el-table-column prop="status" label="状态" align='center' width="90">
						<template scope="scope">
							<el-tag v-if="scope.row.status == '0'" type="success">正常</el-tag>
							<el-tag v-else-if="scope.row.status == '1'" type="danger">已废弃</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" align='center' align='center' width="150" fixed="right">
						<template scope="scope">
							<el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改库存</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination style="margin-top: 10px;" ref="pagination" :total="pagination.total" :current-page="pagination.currentPage" :page-size="pagination.pageSize" :page-sizes="[10, 20]" @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange" layout="prev, pager, next, total, sizes">
				</el-pagination>
			</el-tab-pane>
		</el-tabs>
		<el-dialog title="修改库存" width="60%" :visible="editGoodsDialog.dialogVisible" @open="onOpen('editGoodsDialog','${ctx}/goods/editGoodsStore')" @close="onClose('editGoodsDialog')" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
			<iframe id="editGoodsDialog" :src="editGoodsDialog.url" frameborder="0" style="margin: 0; padding: 0px; overflow: hidden; height: 350px;width: 100%;" scroll="no"></iframe>
		</el-dialog>

	</div>

	<script type="text/javascript">
		var selectData;
		var _vue = new Vue({
			el: '#app',
			data: function() {
				return {
					search: {
						goods_spec: "",
						goods_brand: "",
						goods_type: ""
					},
					brand: eval('${brand}'),
					type: eval('${type}'),
					store: eval('${store}'),
					moduleName: "首页",
					loading: true,
					tableData: [],
					pagination: {
						total: 0,
						pageSize: 10,
						currentPage: 1
					},
					editGoodsDialog: {
						dialogVisible: false,
						url: ""
					}
				}
			},
			methods: $.extend(commonMethods, {
				handleEdit: function(index, row) {
					selectData = row;
					this.editGoodsDialog.dialogVisible = true;
				}
			}),
			mounted: function() {
				// 初始请求数据
				queryList.call(this);
			}
		});

		function queryList() {
			_vue ? "" : _vue = this;
			_vue.loading = true;

			$.ajax({
				url: "${ctx}/goods/warringList",
				type: "POST",
				cache: false,
				data: {
					goods_spec: _vue.search.goods_spec,
					goods_brand: _vue.search.goods_brand,
					goods_type: _vue.search.goods_type,
					cpage: _vue.$refs.pagination.internalCurrentPage,
					pagesize: _vue.$refs.pagination.internalPageSize
				},
				success: function(data) {
					_vue.loading = false;
					_vue.tableData = data.result.list;
					_vue.pagination.total = data.result.totalRow;
					_vue.pagination.pageSize = data.result.pageSize;
				},
				error: function(xhr, msg, e) {},
				complete: function() {
					_vue.loading = false;
				}
			});
		}
	</script>
</@layout>